<template>
	<el-dialog title="租户详情" v-model="dialogVisible" :width="900" :close-on-click-modal="false" @close="closed">
		<div v-loading="loading" class="tenant-detail">
			<el-row :gutter="20" v-if="tenantInfo">
				<!-- 基本信息 -->
				<el-col :span="12">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-office-building"></i>
								<span>基本信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>租户ID：</label>
							<span>{{ tenantInfo.id }}</span>
						</div>
						<div class="info-item">
							<label>租户编码：</label>
							<span>{{ tenantInfo.tenant_code }}</span>
						</div>
						<div class="info-item">
							<label>公司名称：</label>
							<span>{{ tenantInfo.company_name || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>联系人：</label>
							<span>{{ tenantInfo.contact_name || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>联系电话：</label>
							<span>{{ tenantInfo.contact_phone || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>联系邮箱：</label>
							<span>{{ tenantInfo.contact_email || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>公司地址：</label>
							<span>{{ tenantInfo.address || '未设置' }}</span>
						</div>
					</el-card>
				</el-col>

				<!-- 财务信息 -->
				<el-col :span="12">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-money"></i>
								<span>财务信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>账户余额：</label>
							<span class="balance-amount">¥{{ tenantInfo.balance || '0.00' }}</span>
						</div>
						<div class="info-item">
							<label>冻结余额：</label>
							<span class="frozen-amount">¥{{ tenantInfo.frozen_balance || '0.00' }}</span>
						</div>
						<div class="info-item">
							<label>总充值：</label>
							<span class="recharge-amount">¥{{ tenantInfo.total_recharge || '0.00' }}</span>
						</div>
						<div class="info-item">
							<label>总提现：</label>
							<span class="withdraw-amount">¥{{ tenantInfo.total_withdraw || '0.00' }}</span>
						</div>
						<div class="info-item">
							<label>总消费：</label>
							<span class="consume-amount">¥{{ tenantInfo.total_consume || '0.00' }}</span>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<el-row :gutter="20" v-if="tenantInfo" style="margin-top: 20px;">
				<!-- 企业信息 -->
				<el-col :span="12">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-document"></i>
								<span>企业信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>营业执照：</label>
							<span>{{ tenantInfo.business_license || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>法人代表：</label>
							<span>{{ tenantInfo.legal_person || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>注册资本：</label>
							<span>{{ tenantInfo.registered_capital || '未设置' }}</span>
						</div>
						<div class="info-item">
							<label>经营范围：</label>
							<span>{{ tenantInfo.business_scope || '未设置' }}</span>
						</div>
					</el-card>
				</el-col>

				<!-- 状态信息 -->
				<el-col :span="12">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-s-flag"></i>
								<span>状态信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>账户状态：</label>
							<el-tag :type="tenantInfo.status == 1 ? 'success' : 'danger'">
								{{ tenantInfo.status == 1 ? '启用' : '禁用' }}
							</el-tag>
						</div>
						<div class="info-item">
							<label>审核状态：</label>
							<el-tag :type="getAuditStatusType(tenantInfo.audit_time)">
								{{ getAuditStatus(tenantInfo.audit_time) }}
							</el-tag>
						</div>
						<div class="info-item">
							<label>审核时间：</label>
							<span>{{ tenantInfo.audit_time || '未审核' }}</span>
						</div>
						<div class="info-item">
							<label>审核备注：</label>
							<span>{{ tenantInfo.audit_remark || '无' }}</span>
						</div>
						<div class="info-item">
							<label>创建时间：</label>
							<span>{{ tenantInfo.created_at }}</span>
						</div>
						<div class="info-item">
							<label>更新时间：</label>
							<span>{{ tenantInfo.updated_at }}</span>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<!-- 微信信息 -->
			<el-row v-if="tenantInfo && (tenantInfo.official_account_openid || tenantInfo.miniapp_openid || tenantInfo.unionid)" style="margin-top: 20px;">
				<el-col :span="24">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-chat-dot-round"></i>
								<span>微信信息</span>
							</div>
						</template>
						<el-row :gutter="20">
							<el-col :span="8" v-if="tenantInfo.official_account_openid">
								<div class="info-item">
									<label>公众号OpenID：</label>
									<span>{{ tenantInfo.official_account_openid }}</span>
								</div>
							</el-col>
							<el-col :span="8" v-if="tenantInfo.miniapp_openid">
								<div class="info-item">
									<label>小程序OpenID：</label>
									<span>{{ tenantInfo.miniapp_openid }}</span>
								</div>
							</el-col>
							<el-col :span="8" v-if="tenantInfo.unionid">
								<div class="info-item">
									<label>UnionID：</label>
									<span>{{ tenantInfo.unionid }}</span>
								</div>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<template #footer>
			<el-button @click="closed">关闭</el-button>
			<el-button type="primary" @click="editTenant" v-if="tenantInfo">编辑租户</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: 'tenantDetail',
		data() {
			return {
				dialogVisible: false,
				loading: false,
				tenantInfo: null,
				tenantId: null
			}
		},
		methods: {
			open(tenantId) {
				this.tenantId = tenantId
				this.dialogVisible = true
				this.loadTenantDetail()
				return this
			},
			async loadTenantDetail() {
				if (!this.tenantId) return
				
				this.loading = true
				try {
					const res = await this.$API.system.tenant.detail.get({
						tenant_id: this.tenantId
					})
					if (res.code === 200) {
						this.tenantInfo = res.data
					} else {
						this.$alert(res.message, '提示', { type: 'error' })
					}
				} catch (error) {
					this.$alert('获取租户详情失败', '提示', { type: 'error' })
				} finally {
					this.loading = false
				}
			},
			getAuditStatus(auditTime) {
				return auditTime ? '已审核' : '待审核'
			},
			getAuditStatusType(auditTime) {
				return auditTime ? 'success' : 'warning'
			},
			editTenant() {
				this.$emit('edit', this.tenantInfo)
				this.closed()
			},
			closed() {
				this.dialogVisible = false
				this.tenantInfo = null
				this.tenantId = null
				this.$emit('closed')
			}
		}
	}
</script>

<style scoped>
	.tenant-detail {
		min-height: 400px;
	}

	.info-card {
		margin-bottom: 0;
	}

	.card-header {
		display: flex;
		align-items: center;
		font-weight: bold;
		color: #409EFF;
	}

	.card-header i {
		margin-right: 8px;
		font-size: 16px;
	}

	.info-item {
		display: flex;
		margin-bottom: 12px;
		align-items: center;
	}

	.info-item label {
		width: 100px;
		font-weight: bold;
		color: #606266;
		flex-shrink: 0;
	}

	.info-item span {
		flex: 1;
		color: #303133;
		word-break: break-all;
	}

	.balance-amount {
		color: #67C23A;
		font-weight: bold;
		font-size: 16px;
	}

	.frozen-amount {
		color: #E6A23C;
		font-weight: bold;
	}

	.recharge-amount {
		color: #409EFF;
		font-weight: bold;
	}

	.withdraw-amount {
		color: #909399;
		font-weight: bold;
	}

	.consume-amount {
		color: #F56C6C;
		font-weight: bold;
	}
</style>
